<script setup lang="ts">

import {Timestamp} from "../../network/types/Timestamp.ts";
import {ref, toRefs, watch} from "vue";

interface Prop {
  time: Timestamp | undefined
}

const props = defineProps<Prop>()
const {time} = toRefs(props)
const diff = ref(time.value?.diff())
watch(time, (t) => {
  diff.value = t?.diff()
})
</script>

<template>
  <el-tooltip
      v-if="diff"
      effect="dark"
      :show-after="1000"
      :content="time?.full || ''"
      placement="bottom"
  >
    <el-text type="danger" v-if="diff.years>1">{{ time?.short }}</el-text>
    <el-text type="danger" v-else-if="diff.months>1">{{ diff.months }} 个月前</el-text>
    <el-text type="warning" v-else-if="diff.weeks>1">{{ diff.weeks }} 周前</el-text>
    <el-text type="primary" v-else-if="diff.days>1">{{ diff.days }} 天前</el-text>
    <el-text type="success" v-else-if="diff.hours>1">{{ diff.hours }} 小时前</el-text>
    <el-text type="success" v-else-if="diff.minutes>5">{{ diff.minutes }} 分钟前</el-text>
    <el-text type="success" v-else>刚刚</el-text>
  </el-tooltip>
</template>

<style scoped>

</style>